/*
 * @Author: xiaosihan 
 * @Date: 2024-08-04 22:13:07 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 20:06:16
 */


import userStore from "@views/userStore";
import { Button, Table, TableColumnType, Tooltip } from "antd";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import icon4PNG from "./icon4.png";
import styles from "./projectJoiner.module.less";
import shareModalStore from "@views/pc/PartsDetails/Joiner/ShareModal/shareModalStore";
import projectJoinerStore from "./projectjoinerStore";
import ProjectShareModal from "./ProjectShareModal/ProjectShareModal";
import projectDatailStore from "../projectDatailStore";

interface Iprops {
    projectId: string
}

// 成员
export default function ProjectJooiner(props: Iprops) {

    const [list, setList] = useState(projectJoinerStore.list);
    const [page, setPage] = useState(projectJoinerStore.page);
    const [totalCount, setTotalCount] = useState(projectJoinerStore.totalCount);
    const [isSelft, setIsself] = useState(projectDatailStore.userId === userStore.userId);

    useEffect(() => {
        if (props.projectId) {
            projectJoinerStore.setProjectId(props.projectId);
        }
    }, [props]);

    useEffect(() => autorun(() => {
        setList(projectJoinerStore.list);
        setPage(projectJoinerStore.page);
        setTotalCount(projectJoinerStore.totalCount);
        setIsself(projectDatailStore.userId === userStore.userId);
    }), []);

    const dataSource: any[] = [];
    list.map(l => {
        dataSource.push({
            key: l.id,
            id: l.id,
            name: l.userName,
            userId: l.userId,
            userAvatarUrl: l.userAvatarUrl
        });
    });

    const columns: Array<TableColumnType> = [
        {
            title: '成员名称',
            align: "center",
            dataIndex: 'name',
            key: 'name',
            render(name: string, p: any) {
                return (
                    <span
                        style={{
                            textAlign: "left",
                            display: "inline-block",
                            width: "100%"
                        }}
                    >
                        <img
                            alt=""
                            src={p.userAvatarUrl}
                            className={styles.userAvatar}
                        />
                        {name}
                    </span>
                );
            }
        },
        {
            title: '角色',
            align: "center",
            dataIndex: 'userId',
            key: 'userId',
            render(userId: string) {
                return (userId === userStore.userId) ? "创建者" : "参与者";
            }
        }];

    isSelft &&
        columns.push({
            title: '操作',
            align: "center",
            dataIndex: 'data',
            key: 'operate',
            render(statu: string, p: any) {
                return (
                    <div className={styles.operate} >
                        <Tooltip
                            rootClassName={styles.delete_tip}
                            placement="right"
                            mouseEnterDelay={0}
                            trigger={["click"]}
                            title={
                                <Button
                                    danger
                                    type="primary"
                                    size="small"
                                    onClick={async () => {
                                        projectJoinerStore.delete(p.id);
                                    }}
                                >确认删除</Button>
                            }
                        >
                            <img className={styles.icon} src={icon4PNG} alt="" />
                        </Tooltip>

                    </div>
                );
            }
        });

    return (
        <div className={styles.joiner} >
            {/* 分享链接弹窗 */}
            <ProjectShareModal projectId={props.projectId} />

            <Table
                size="small"
                className={styles.table}
                dataSource={dataSource}
                columns={columns as any}
                pagination={{
                    current: page,
                    total: totalCount,
                    pageSize: 10,
                    onChange: (page: number, pageSize: number) => {
                        projectJoinerStore.setPage(page);
                    }
                }}
            />

        </div>
    );

}